<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>瀑布流</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .box {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }

        ul {
            width: 23%;
        }

        li {
            width: 100%;
            border: 1px solid #000;
            margin-bottom: 15px;
            background: url(./f1.jpeg) 5%;
        }

        li>img {
            width: 100%;
            display: block;
            object-fit: wrap;

        }
    </style>
</head>

<body>
    <div class="box">
        <ul></ul>
        <ul></ul>
        <ul></ul>
        <ul></ul>
    </div>
    <script>
        // 假设一次生成20个li标签 如果没有图片 需要给li设置随机高度
        // 每次添加li 需要先判断哪个ul的高度最小 给最小的ul添加这个li标签
        var uls = document.querySelectorAll('ul');
        function list() {
            for (var i = 0; i < 20; i++) {
                var h = Math.floor(Math.random() * 200) + 100;// 100-300
                var li = document.createElement('li');
                li.style.height = h + 'px';
                var ul = uls[0];
                for (var k = 0; k < uls.length; k++) {
                    if (ul.offsetHeight > uls[k].offsetHeight) {
                        ul = uls[k];
                    }
                }
                ul.appendChild(li);
            }
        }
        list();
        var isShow = true;
        window.onscroll = function () {
            var htmlTop = document.documentElement.scrollTop;
            var bodyH = document.body.offsetHeight;
            var winH = window.innerHeight;
            if (htmlTop + winH >= bodyH - 100 && isShow) {
                console.log('差不多到底了');
                isShow = false;
                setTimeout(function () {
                    isShow = true;
                }, 500)
                list();
            }
        }
    </script>
</body>

</html>